<template>
  <div>
  
   <h3>设置客户价格等级</h3>   
   <hr style="border:1px solid #eee;margin-bottom:10px;"/> 

    <div style="margin-top:20px;"> 

  <el-row  v-for="(dt,index) in priceList" :key="index" style="display: flex;margin-bottom: 30px;margin-top: 10px;align-items: center;">  
    <el-col :span="6">
    <el-rate
        v-model="dt.star"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}">
    </el-rate>
    </el-col>
    <el-col :span="4" style="">
          <div v-if="index==0"> {{priceModel.star1Name}}</div>
       <div v-if="index==1">  {{priceModel.star2Name}}</div>
       <div v-if="index==2"> {{priceModel.star3Name}}</div>
        <!--<div v-if="index==3"> {{priceModel.star4Name}}</div>
        <div v-if="index==4"> {{priceModel.star5Name}}</div>-->

    </el-col>

    <!-- <el-col :span="6">
       <div v-if="index==0"> 销售价<el-input v-model="priceModel.ownerPrice"    style="width:60px;height:30px;" />元/含税</div>
       <div v-if="index==1"> 销售价 <el-input v-model="priceModel.agentPrice"   style="width:60px;height:30px;" />元/含税</div>
       <div v-if="index==2"> 销售价 <el-input v-model="priceModel.star3Price"    style="width:60px;height:30px;" />元/含税</div>
        <div v-if="index==3"> 销售价 <el-input v-model="priceModel.star4Price"    style="width:60px;height:30px;" />元/含税</div>
        <div v-if="index==4">销售价 <el-input v-model="priceModel.star5Price"    style="width:60px;height:30px;" />元/含税</div>
    </el-col> -->
  

  
    <el-col :span="6">
      <div v-if="index==0">
        <el-input v-model="priceModel.ownerPrice" style="width:250px;height:30px;" >
          <template slot="prepend">销售价</template>
          <template slot="append">元/含税</template>
        </el-input>
      </div>
      <div v-if="index==1">
        <el-input v-model="priceModel.agentPrice" style="width:250px;height:30px;" >
          <template slot="prepend">销售价</template>
          <template slot="append">元/含税</template>
        </el-input>
      </div>
      <div v-if="index==2">
        <el-input v-model="priceModel.star3Price" style="width:250px;height:30px;" >
          <template slot="prepend">销售价</template>
          <template slot="append">元/含税</template>
        </el-input>
      </div>
      <!--<div v-if="index==3">
        <el-input v-model="priceModel.star4Price" style="width:250px;height:30px;" >
          <template slot="prepend">销售价</template>
          <template slot="append">元/含税</template>
        </el-input>
      </div>
      <div v-if="index==4">
        <el-input v-model="priceModel.star5Price" style="width:250px;height:30px;" >
          <template slot="prepend">销售价</template>
          <template slot="append">元/含税</template>
        </el-input>
      </div>-->
    </el-col>
  

</el-row>  
</div>

  </div>
</template>


<script>

//
import * as Api from "@/api/Api.js";
import * as Config from "@/api/Config.js";
import * as RoundApi from "@/api/RoundApi.js";

export default {
  data () {


    return {



        priceModel:{

        },
        price1:4.5,

        priceList:[{star:1,name:"车主"},
        {star:2,name:"代理商"},
        {star:3,name:"三星客户"},
        ],

    }
  },
  watch:{

      goodsId(){

          console.log("watch Value:")
          console.log(this.goodsId)

          Api.queryMemberPrice(this,this.goodsId).then(res=>{

              if(res.retCode){

                  this.priceModel = res.data
                  console.log("========")
                  console.log(this.priceModel)
              }



          });
      },
         $route(to, from) {
      // 对路由变化作出响应...
      console.log(to, from);
      if (to.fullPath === "/addgoods") {
        Object.assign(this.$data, this.$options.data());
      }
    }

  },
  props:["goodsId"],
  mounted () {
      this.getList()
  },
  methods:{  getList() {
      RoundApi.getDiscountList(this).then(res => {
        if (res.retCode) {
          this.priceModel = res.data;
          console.log(111,res);
        } else {
        }
      });
    },
      getPrice(){

          return this.priceModel;

      }


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
